<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .verify-type-bankCard-mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .5);
    }

    .bankCard-mask-body {
        width: 82vw;
        height: 60vw;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 15px;
        background-color: white;
    }

    .bankCard-mask-title {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 15%;
        /* background-color: red; */
        text-align: center;
        line-height: 16vw;
        font-size: 4.5vw;
    }

    .bankCard-mask-contenxt {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 55%;
        /* background-color: rgb(13, 180, 55); */
        text-align: center;
        font-size: 3.5vw;
    }

    .contenxt-text {
        padding: 0;
        margin: 0 3%;
        width: 94%;
        height: 40%;
        /* background-color: rgb(180, 127, 13); */
        text-align: justify;
        padding-top: 8%;
        font-size: 3.5vw;
    }

    .contenxt-tips {
        padding: 0;
        margin: 0 3%;
        width: 94%;
        height: 40%;
        text-align: justify;
        /* line-height: 2vw; */
        font-size: 3.5vw;
        color: #999;
    }
    
    .btn-box {
        /* background-color: aqua; */
        width: 100%;
        height: 20%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
    }

    .bankCard-mask-btns {
        width: 36%;
        height: 9vw;
        background-color: rgb(239, 239, 239);
        border-radius: 20px;
        text-align: center;
        line-height: 9vw;
        font-size: 3.9vw;
        color: rgb(0, 0, 0);
    }

    .bankCard-mask-btn-confirm {
        background-color: rgb(89, 108, 225);
        color: white;
    }
</style>
<body>
    <div class="verify-type-bankCard-mask" id="erify-type-bankCard-mask">
        <div class="bankCard-mask-body">
            <h5 class="bankCard-mask-title">查询提示</h5>
            <div class="bankCard-mask-contenxt">
                <div class="contenxt-text">银行卡信息验证，需要您授权将您在度小满留存的卡信息后四位在此银行卡信息验证页面进行显示</div>
                <div class="contenxt-tips">注意：如您选择取消，则无法使用“银行卡信息验证”方式进行身份验证</div>
            </div>
            <div class="btn-box">
                <span class="bankCard-mask-btns bankCard-mask-btn-cancel" id="bankCard-mask-btn-cancel">取消</span>
                <span class="bankCard-mask-btns bankCard-mask-btn-confirm" id="bankCard-mask-btn-confirm">确认查询</span>
            </div>
        </div>
    </div>
    
</body>
</html>